<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>申报汇总 - 线上评测系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

    /* 主要内容样式 */
    .main-content {
      padding: 20px;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e8e8e8;
    }

    .page-title {
      font-size: 20px;
      font-weight: 500;
      color: #333;
    }

    .btn-group {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .btn-primary {
      background-color: #1890ff;
      color: #fff;
    }

    .btn-primary:hover {
      background-color: #40a9ff;
    }

    .btn-default {
      background-color: #f5f5f5;
      color: #333;
      border: 1px solid #d9d9d9;
    }

    .btn-default:hover {
      background-color: #e8e8e8;
    }

    /* 项目列表样式 */
    .project-list-container {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
    }

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .search-box {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      width: 300px;
    }

    .search-box input {
      border: none;
      outline: none;
      flex: 1;
      padding: 0 8px;
      font-size: 14px;
    }

    .search-box .search-icon {
      color: #999;
      margin-right: 5px;
    }

    .filter-btns {
      display: flex;
      gap: 10px;
    }

    .filter-btn {
      padding: 6px 12px;
      background: #f5f5f5;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      color: #333;
    }

    .filter-btn.active {
      background: #e6f7ff;
      border-color: #91d5ff;
      color: #1890ff;
    }

    .project-table {
      width: 100%;
      border-collapse: collapse;
    }

    .project-table th, 
    .project-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
    }

    .project-table th {
      background-color: #fafafa;
      font-weight: 500;
      color: #666;
      font-size: 14px;
    }

    .project-table tr:hover {
      background-color: #fafafa;
    }

    .status-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
    }

    .status-badge.success {
      background-color: #e6fff2;
      color: #52c41a;
    }

    .status-badge.warning {
      background-color: #fff7e6;
      color: #faad14;
    }

    .status-badge.info {
      background-color: #e6f7ff;
      color: #1890ff;
    }

    .status-badge.danger {
      background-color: #fff1f0;
      color: #f5222d;
    }

    /* 统计卡片样式 */
    .stats-container {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    .stat-card {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .stat-title {
      font-size: 14px;
      color: #8c8c8c;
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 500;
      color: #333;
    }

    .stat-card.primary .stat-value {
      color: #1890ff;
    }

    .stat-card.success .stat-value {
      color: #52c41a;
    }

    .stat-card.warning .stat-value {
      color: #faad14;
    }

    .stat-card.danger .stat-value {
      color: #f5222d;
    }

    /* 操作列样式 */
    .action-column {
      display: flex;
      gap: 8px;
    }

    .action-btn {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
    }

    .action-btn.view {
      background-color: #e6f7ff;
      color: #1890ff;
    }

    .action-btn.view:hover {
      background-color: #bae7ff;
    }

    .action-btn.edit {
      background-color: #fff7e6;
      color: #faad14;
    }

    .action-btn.edit:hover {
      background-color: #ffe7ba;
    }

    .action-btn.delete {
      background-color: #fff1f0;
      color: #f5222d;
    }

    .action-btn.delete:hover {
      background-color: #ffccc7;
    }

    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      gap: 8px;
      align-items: center;
    }

    .page-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      transition: all 0.3s;
    }

    .page-btn:hover {
      border-color: #1890ff;
      color: #1890ff;
    }

    .page-btn.active {
      background-color: #1890ff;
      border-color: #1890ff;
      color: #fff;
    }

    .page-btn.disabled {
      color: #d9d9d9;
      cursor: not-allowed;
    }

    .page-btn.disabled:hover {
      border-color: #d9d9d9;
      color: #d9d9d9;
    }

    /* 禁用按钮样式 */
    .action-btn.disabled {
      background-color: #f5f5f5;
      color: #d9d9d9;
      cursor: not-allowed;
    }

    .action-btn.disabled:hover {
      background-color: #f5f5f5;
      color: #d9d9d9;
    }

    /* 自定义模态对话框样式 */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    .modal-container {
      background-color: white;
      border-radius: 8px;
      width: 400px;
      max-width: 90%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }

    .modal-content {
      padding: 24px;
      text-align: center;
    }

    .modal-message {
      font-size: 16px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: left;
    }
    
    .modal-message i {
      font-size: 20px;
      color: #faad14;
      flex-shrink: 0;
    }

    .modal-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .modal-btn {
      padding: 8px 24px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
    }

    .modal-btn-cancel {
      background-color: #f5f5f5;
      color: #333;
      border: 1px solid #d9d9d9;
    }

    .modal-btn-cancel:hover {
      background-color: #e8e8e8;
    }

    .modal-btn-confirm {
      background-color: #1890ff;
      color: #fff;
    }

    .modal-btn-confirm:hover {
      background-color: #40a9ff;
    }

    /* 提示框样式 */
    .alert-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    
    .alert-container {
      background-color: white;
      border-radius: 8px;
      width: 400px;
      max-width: 90%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }
    
    .alert-content {
      padding: 24px;
      text-align: center;
    }
    
    .alert-message {
      font-size: 16px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: left;
    }
    
    .alert-message i {
      font-size: 20px;
      color: #52c41a;
      flex-shrink: 0;
    }
    
    .alert-button {
      padding: 8px 24px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
      background-color: #1890ff;
      color: #fff;
    }
    
    .alert-button:hover {
      background-color: #40a9ff;
    }
  </style>
</head>
<body>
  <div class="main-content">
    <div class="page-header">
      <h1 class="page-title">申报汇总</h1>
      <div class="btn-group">
        <button class="btn btn-default">
          <i class="fas fa-download"></i> 导出
        </button>
        <button class="btn btn-default" id="printAllBtn">
          <i class="fas fa-print"></i> 打印
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <div class="stat-card primary">
        <div class="stat-title">项目总数</div>
        <div class="stat-value">42</div>
      </div>
      <div class="stat-card success">
        <div class="stat-title">已审核</div>
        <div class="stat-value">28</div>
      </div>
      <div class="stat-card info">
        <div class="stat-title">审核中</div>
        <div class="stat-value">10</div>
      </div>
      <div class="stat-card danger">
        <div class="stat-title">未通过</div>
        <div class="stat-value">4</div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="project-list-container">
      <div class="list-header">
        <div class="search-box">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="项目名称/申报部门/项目负责人" />
        </div>
        <div class="filter-btns">
          <button class="filter-btn active">全部</button>
          <button class="filter-btn">待审核</button>
          <button class="filter-btn">审核通过</button>
          <button class="filter-btn">审核退回</button>
        </div>
      </div>

      <table class="project-table">
        <thead>
          <tr>
            <th style="width: 50px;">NO.</th>
            <th>项目名称</th>
            <th>申报部门</th>
            <th>项目负责人</th>
            <th>申报日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>医疗数据分析系统</td>
            <td>信息化部</td>
            <td>张三</td>
            <td>2022-01-14</td>
            <td><span class="status-badge success">已审核</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review disabled">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>网络安全升级项目</td>
            <td>信息化部</td>
            <td>李四</td>
            <td>2022-01-14</td>
            <td><span class="status-badge success">已审核</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review disabled">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>移动办公应用开发</td>
            <td>办公室</td>
            <td>王五</td>
            <td>2020-09-21</td>
            <td><span class="status-badge info">审核中</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>智能会议系统建设</td>
            <td>信息化部</td>
            <td>赵六</td>
            <td>2024-02-26</td>
            <td><span class="status-badge success">已审核</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review disabled">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>5</td>
            <td>数据中心扩容</td>
            <td>信息化部</td>
            <td>钱七</td>
            <td>2020-09-21</td>
            <td><span class="status-badge danger">未通过</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>6</td>
            <td>公文流转系统</td>
            <td>办公室</td>
            <td>孙八</td>
            <td>2022-01-14</td>
            <td><span class="status-badge success">已审核</span></td>
            <td>
              <div class="action-column">
                <button class="action-btn view">查看</button>
                <button class="action-btn review disabled">审核</button>
                <button class="action-btn delete">删除</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 分页 -->
      <div class="pagination">
        <button class="page-btn" title="第一页"><i class="fas fa-angle-double-left"></i></button>
        <button class="page-btn" title="上一页"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span>...</span>
        <button class="page-btn">10</button>
        <button class="page-btn" title="下一页"><i class="fas fa-angle-right"></i></button>
        <button class="page-btn" title="最后一页"><i class="fas fa-angle-double-right"></i></button>
      </div>
    </div>
  </div>

  <!-- 自定义确认对话框 -->
  <div class="modal-overlay" id="confirmModal">
    <div class="modal-container">
      <div class="modal-content">
        <div class="modal-message" id="modalMessage">
          <i class="fas fa-question-circle"></i>
          <span id="modalMessageText"></span>
        </div>
        <div class="modal-buttons">
          <button class="modal-btn modal-btn-cancel" id="modalCancel">取消</button>
          <button class="modal-btn modal-btn-confirm" id="modalConfirm">确定</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 自定义提示对话框 -->
  <div class="alert-overlay" id="alertModal">
    <div class="alert-container">
      <div class="alert-content">
        <div class="alert-message" id="alertMessage">
          <i class="fas fa-check-circle"></i>
          <span id="alertMessageText"></span>
        </div>
        <button class="alert-button" id="alertConfirm">确定</button>
      </div>
    </div>
  </div>

  <!-- 审批弹出框 -->
  <div class="modal-overlay" id="approvalModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div class="modal-container" style="width: 700px; max-width: 95%; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative;">
      <div class="modal-header" style="padding: 15px 20px; border-bottom: 1px solid #eee; position: relative; background-color: #fff;">
        <h4 style="margin: 0; text-align: center; font-size: 18px; font-weight: 500;">提交审批</h4>
        <span class="close-btn" style="position: absolute; right: 20px; top: 15px; cursor: pointer; font-size: 22px; color: #999;">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px;">
        <!-- 审批意见 -->
        <div class="approval-comment">
          <h5 style="font-size: 16px; margin-bottom: 15px; font-weight: 500;">审批意见</h5>
          <textarea class="form-control" id="approvalComment" rows="6" placeholder="请输入审批意见..." style="width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 12px; font-size: 14px; resize: none;"></textarea>
        </div>
        
        <!-- 审批按钮 -->
        <div style="display: flex; justify-content: flex-end; margin-top: 30px; gap: 15px;">
          <button type="button" id="approvalCancelBtn" style="min-width: 100px; padding: 10px 20px; border-radius: 4px; font-size: 14px; background-color: #f0f0f0; color: #333; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#e0e0e0'" onmouseout="this.style.backgroundColor='#f0f0f0'">
            <i class="fas fa-times"></i> 取消
          </button>
          <button type="button" id="approvalRejectBtn" style="min-width: 120px; padding: 10px 20px; border-radius: 4px; font-size: 14px; background-color: #ff4d4f; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#ff7875'" onmouseout="this.style.backgroundColor='#ff4d4f'">
            <i class="fas fa-ban"></i> 审核拒绝
          </button>
          <button type="button" id="approvalApproveBtn" style="min-width: 120px; padding: 10px 20px; border-radius: 4px; font-size: 14px; background-color: #52c41a; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#73d13d'" onmouseout="this.style.backgroundColor='#52c41a'">
            <i class="fas fa-check"></i> 审核通过
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 过滤按钮点击事件
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        filterBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 获取过滤条件
        const filterText = this.textContent.trim();
        
        // 获取所有行
        const rows = document.querySelectorAll('.project-table tbody tr');
        
        // 根据过滤条件显示/隐藏行
        rows.forEach(row => {
          const statusCell = row.querySelector('.status-badge');
          const status = statusCell ? statusCell.textContent.trim() : '';
          
          if (filterText === '全部') {
            row.style.display = '';
          } else if (filterText === '待审核' && status === '审核中') {
            row.style.display = '';
          } else if (filterText === '审核通过' && status === '已审核') {
            row.style.display = '';
          } else if (filterText === '审核退回' && status === '未通过') {
            row.style.display = '';
          } else {
            row.style.display = 'none';
          }
        });
        
        // 更新分页信息
        updatePagination();
      });
    });
    
    // 搜索框功能
    const searchInput = document.querySelector('.search-box input');
    searchInput.addEventListener('input', function() {
      const searchText = this.value.toLowerCase();
      const rows = document.querySelectorAll('.project-table tbody tr');
      
      rows.forEach(row => {
        const projectName = row.cells[1].textContent.toLowerCase();
        const department = row.cells[2].textContent.toLowerCase();
        const responsible = row.cells[3].textContent.toLowerCase();
        
        if (projectName.includes(searchText) || 
            department.includes(searchText) || 
            responsible.includes(searchText)) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
      
      // 更新分页信息
      updatePagination();
    });

    // 自定义确认对话框
    function showConfirmModal(message, onConfirm, onCancel) {
      const modal = document.getElementById('confirmModal');
      const messageEl = document.getElementById('modalMessageText');
      const confirmBtn = document.getElementById('modalConfirm');
      const cancelBtn = document.getElementById('modalCancel');
      
      messageEl.textContent = message;
      modal.style.display = 'flex';
      
      // 移除之前的事件监听器
      const newConfirmBtn = confirmBtn.cloneNode(true);
      const newCancelBtn = cancelBtn.cloneNode(true);
      confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
      cancelBtn.parentNode.replaceChild(newCancelBtn, cancelBtn);
      
      // 添加新的事件监听器
      newConfirmBtn.addEventListener('click', function() {
        modal.style.display = 'none';
        if (onConfirm) onConfirm();
      });
      
      newCancelBtn.addEventListener('click', function() {
        modal.style.display = 'none';
        if (onCancel) onCancel();
      });
    }
    
    // 自定义提示对话框
    function showAlertModal(message, onConfirm) {
      const modal = document.getElementById('alertModal');
      const messageEl = document.getElementById('alertMessageText');
      const confirmBtn = document.getElementById('alertConfirm');
      
      messageEl.textContent = message;
      modal.style.display = 'flex';
      
      // 移除之前的事件监听器
      const newConfirmBtn = confirmBtn.cloneNode(true);
      confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
      
      // 添加新的事件监听器
      newConfirmBtn.addEventListener('click', function() {
        modal.style.display = 'none';
        if (onConfirm) onConfirm();
      });
    }

    // 操作按钮点击事件
    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.classList.contains('disabled')) {
          return; // 禁用状态的按钮不响应点击
        }
        
        const action = this.classList.contains('view') ? '查看' :
                      this.classList.contains('review') ? '审核' : '删除';
        const row = this.closest('tr');
        const projectName = row.cells[1].textContent;
        const projectId = row.cells[0].textContent;
        
        if (action === '删除') {
          showConfirmModal(`确定要将项目"${projectName}"移入回收站吗？`, function() {
            // 确认删除的逻辑
            showAlertModal(`项目"${projectName}"已移入回收站`);
            // 不直接移除行，而是标记为已删除状态
            row.style.opacity = "0.6";
            row.querySelector('.status-badge').textContent = "已删除";
            row.querySelector('.status-badge').className = "status-badge";
          });
        } else if (action === '审核') {
          // 显示审批弹出框
          showApprovalModal(projectId, projectName);
        } else if (action === '查看') {
          // 构建URL参数
          const params = new URLSearchParams();
          params.append('id', projectId);
          params.append('name', projectName);
          params.append('department', row.cells[2].textContent);
          params.append('responsible', row.cells[3].textContent);
          params.append('date', row.cells[4].textContent);
          params.append('status', row.cells[5].querySelector('.status-badge').textContent);
          params.append('action', 'view'); // 标记为查看操作
          
          // 跳转到项目基本信息页面
          window.location.href = `excel/project-basic-info.html?${params.toString()}`;
        }
      });
    });

    // 打印所有项目列表
    document.getElementById('printAllBtn').addEventListener('click', function() {
      const printWindow = window.open('', '_blank');
      
      // 获取项目表格数据
      const table = document.querySelector('.project-table');
      const rows = Array.from(table.querySelectorAll('tbody tr')).filter(row => row.style.display !== 'none');
      
      // 创建打印页面内容
      let printContent = `
        <html>
        <head>
          <title>项目申报汇总表</title>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            h1 { text-align: center; margin-bottom: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
          </style>
        </head>
        <body>
          <h1>项目申报汇总表</h1>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>项目名称</th>
                <th>申报部门</th>
                <th>项目负责人</th>
                <th>申报日期</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
      `;
      
      // 添加表格数据
      rows.forEach((row, index) => {
        const cells = Array.from(row.cells);
        printContent += '<tr>';
        // 序号、项目名称、申报部门、项目负责人、申报日期、状态（跳过操作列）
        printContent += `<td>${index + 1}</td>`; // 重新编号
        for (let i = 1; i < 6; i++) {
          if (i === 5) { // 状态列需要特殊处理以获取状态文本
            const status = cells[i].querySelector('.status-badge').textContent;
            printContent += `<td>${status}</td>`;
          } else {
            printContent += `<td>${cells[i].textContent}</td>`;
          }
        }
        printContent += '</tr>';
      });
      
      // 完成页面
      printContent += `
            </tbody>
          </table>
          <div style="margin-top: 30px; display: flex; justify-content: space-between;">
            <div>打印日期：${new Date().toLocaleDateString()}</div>
            <div>总计：${rows.length}个项目</div>
          </div>
        </body>
        </html>
      `;
      
      // 写入打印窗口并打印
      printWindow.document.open();
      printWindow.document.write(printContent);
      printWindow.document.close();
      
      // 等待资源加载完成后打印
      setTimeout(() => {
        printWindow.print();
      }, 500);
    });

    // 分页按钮点击事件
    const pageBtns = document.querySelectorAll('.page-btn');
    pageBtns.forEach(btn => {
      if (!btn.classList.contains('disabled')) {
        btn.addEventListener('click', function() {
          pageBtns.forEach(b => b.classList.remove('active'));
          if (!this.querySelector('i')) {
            this.classList.add('active');
          }
          // 这里可以添加实际的分页逻辑
          // 目前仅实现了UI状态变化
        });
      }
    });
    
    // 更新分页信息（简化版，实际项目中可能需要更复杂的逻辑）
    function updatePagination() {
      const visibleRows = document.querySelectorAll('.project-table tbody tr:not([style*="display: none"])');
      const paginationInfo = document.querySelector('.pagination');
      
      if (visibleRows.length === 0) {
        // 如果没有可见行，显示无数据提示
        const tbody = document.querySelector('.project-table tbody');
        const existingNoData = tbody.querySelector('.no-data-row');
        
        if (!existingNoData) {
          const noDataRow = document.createElement('tr');
          noDataRow.className = 'no-data-row';
          noDataRow.innerHTML = `<td colspan="7" style="text-align: center; padding: 20px;">没有找到匹配的项目</td>`;
          tbody.appendChild(noDataRow);
        }
      } else {
        // 如果有可见行，移除无数据提示
        const existingNoData = document.querySelector('.no-data-row');
        if (existingNoData) {
          existingNoData.remove();
        }
      }
    }

    // 显示审批弹出框
    function showApprovalModal(projectId, projectName) {
      const modal = document.getElementById('approvalModal');
      modal.style.display = 'flex';
      
      // 关闭按钮事件
      const closeBtn = modal.querySelector('.close-btn');
      closeBtn.onclick = function() {
        modal.style.display = 'none';
      };
      
      // 取消按钮事件
      const cancelBtn = document.getElementById('approvalCancelBtn');
      cancelBtn.onclick = function() {
        modal.style.display = 'none';
      };
      
      // 审核拒绝按钮事件
      const rejectBtn = document.getElementById('approvalRejectBtn');
      rejectBtn.onclick = function() {
        const approvalComment = document.getElementById('approvalComment').value.trim();
        if (!approvalComment) {
          showAlertModal('请输入审核意见', 'warning');
          return;
        }
        
        showConfirmModal(`确认要拒绝项目"${projectName}"的申请吗？`, function(confirmed) {
          if (confirmed) {
            // 更新项目状态为"未通过"
            const rows = document.querySelectorAll('.project-table tbody tr');
            rows.forEach(row => {
              if (row.cells[0].textContent === projectId) {
                const statusBadge = row.querySelector('.status-badge');
                statusBadge.textContent = '未通过';
                statusBadge.className = 'status-badge danger';
                
                // 禁用审核按钮
                const reviewBtn = row.querySelector('.action-btn.review');
                reviewBtn.classList.add('disabled');
              }
            });
            
            showAlertModal(`项目"${projectName}"申请已被拒绝`, 'success');
            modal.style.display = 'none';
          }
        });
      };
      
      // 审核通过按钮事件
      const approveBtn = document.getElementById('approvalApproveBtn');
      approveBtn.onclick = function() {
        const approvalComment = document.getElementById('approvalComment').value.trim();
        if (!approvalComment) {
          showAlertModal('请输入审核意见', 'warning');
          return;
        }
        
        showConfirmModal(`确认要通过项目"${projectName}"的申请吗？`, function(confirmed) {
          if (confirmed) {
            // 更新项目状态为"已审核"
            const rows = document.querySelectorAll('.project-table tbody tr');
            rows.forEach(row => {
              if (row.cells[0].textContent === projectId) {
                const statusBadge = row.querySelector('.status-badge');
                statusBadge.textContent = '已审核';
                statusBadge.className = 'status-badge success';
                
                // 禁用审核按钮
                const reviewBtn = row.querySelector('.action-btn.review');
                reviewBtn.classList.add('disabled');
              }
            });
            
            showAlertModal(`项目"${projectName}"申请已通过审核`, 'success');
            modal.style.display = 'none';
          }
        });
      };
    }
  </script>
</body>
</html>